<template>
  <!-- zx  2021 7 20 -->
  <div>
    <el-card class="box-card">
      <div>
        <!-- 按钮 -->
        <div class="but">
          <el-button
            @click="savaBtn"
            size="medium"
            class="saveBtn"
          >预览</el-button>
          <el-button
            class="btn"
            @click="saveBtn"
            size="medium"
          >保存</el-button>
          <el-button
            @click="deselect"
            size="medium"
            class="saveBtn"
          >取消</el-button>
        </div>
        <div class="boxSlider2">
          <div class="top">
            <!-- 头部面包屑 -->
            <el-breadcrumb separator="/">
              <el-breadcrumb-item>资源配置</el-breadcrumb-item>
              <el-breadcrumb-item><a href="/">联系方式</a></el-breadcrumb-item>
            </el-breadcrumb>

          </div>

          <div class="txt">联系方式配置</div>
          <el-form
            ref="form"
            :model="form"
            label-width="120px"
            label-position="left"
            class="main"
            :rules="rules"
          >
            <el-form-item
              label="联系人："
              prop="name"
            >
              <el-input
                maxlength="6"
                show-word-limit
                v-model="form.name"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="联系方式："
              prop="contact"
            >
              <el-input
                maxlength="13"
                show-word-limit
                v-model="form.contact"
                onkeyup="this.value=this.value.replace(/[^\d\-]/g,'')"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="联系地址："
              prop="site"
            >
              <el-input
                maxlength="60"
                show-word-limit
                v-model="form.site"
              ></el-input>
            </el-form-item>

          </el-form>
        </div>
        <!-- 弹出层 -->
        <div
          class="pop"
          v-show="popShow"
        >
          <div
            class="close"
            @click="closeBtn"
          ></div>
          <div class="one">联系方式</div>
          <div class="two">{{form.name}}</div>
          <div class="three">{{form.contact}}</div>
          <div class="three">{{form.site}}</div>

        </div>
        <!-- 遮盖层 -->
        <div
          class="all"
          v-show="popShow"
          @click="closeBtn"
        ></div>

      </div>
    </el-card>
  </div>
</template>

<script>
import { algin, getContact, submitContact } from '@/api/contact.js'

export default {
  data() {
    var phone = (rule, value, callback) => {
      const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/
      const landline = /^[0][1-9]{2,3}-[0-9]{5,10}$/
      if (!value) {
        return callback(new Error('电话号码不能为空'))
      }
      setTimeout(() => {
        // Number.isInteger是es6验证数字是否为整数的方法,实际输入的数字总是识别成字符串
        // 所以在前面加了一个+实现隐式转换

        // if (!Number.isInteger(+value)) {
        //   callback(new Error('请输入数字值'))
        // } else {
        if (phoneReg.test(value) || landline.test(value)) {
          callback()
        }
        else {
          callback(new Error('电话号码格式不正确'))
        }
        // }
      }, 100)
    }
    return {


      form: {
        name: "",
        contact: "",
        site: ""
      },
      name1: "",
      contact1: "",
      site1: "",
      popShow: false,


      rules: {
        name: [
          { required: true, message: '请输入联系人', trigger: 'blur' },
          // { min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur' }
        ],
        contact: [
          { required: true, message: '请输入联系方式', trigger: 'blur' },
          { validator: phone, trigger: 'blur' }

        ],
        site: [
          { required: true, message: '请输入地址', trigger: 'blur' },
          // { max: 60, message: '长度在60个字符之内', trigger: 'blur' }
        ]

      }
    }
  },
  mounted() {
    this.getcontactList()
  },

  methods: {
    savaBtn() {
      this.popShow = true
    },
    closeBtn() {
      this.popShow = false
    },
    // 获取联系方式信息
    async getcontactList() {
      const data = await getContact()
      // console.log(data);
      if (data.status == 200) {
        this.form.name = data.data.data.contactName
        this.form.contact = data.data.data.phone
        this.form.site = data.data.data.address
        this.name1 = data.data.data.contactName
        this.contact1 = data.data.data.phone
        this.site1 = data.data.data.address
      } else {
        this.$message.error('获取联系方式失败');
      }


    },
    // 保存
    saveBtn() {
      this.$refs.form.validate(async (valid) => {
        if (!valid) return
        const res = await submitContact(
          {
            address: this.form.site,
            contactName: this.form.name,
            phone: this.form.contact
          })
        console.log(res);
        if (res.status == 200) {
          if (res.data.msg == "success") {
            this.$message.success('保存联系方式成功')
            this.getcontactList()
          } else {
            this.$message.error('保存联系方式失败');

          }
        }


      })
      //  await submitContact({ address: this.form.site, contactName: this.form.name, phone: this.form.contact })
      //       console.log(res);
      //       if (res.status !== 200) {
      //         this.$message.error('保存联系方式失败');
      //       } else {
      //         this.$message.success('保存联系方式成功')
      //         this.getcontactList()
      //       }
    },
    // 取消
    deselect() {
      this.$refs.form.resetFields()
      this.form.name = this.name1
      this.form.contact = this.contact1
      this.form.site = this.site1

    }

  }
}
</script>
<style lang="scss" scoped>
.box-card {
  // display: flex;
  position: relative;
  // width: 100%;
  margin-top: 80px;
  margin-left: 24px;
  // padding-left: 24px;
  padding-right: 24px;
  margin-right: 24px;
  height: 984px;
  // padding-top: 18px;
  // overflow: auto;
  z-index: 11;
  // .but {
  //   width: 352px;
  //   margin-top: 0px;
  //   margin-left: 1056px;
  //   /deep/ .el-button {
  //     margin-right: 16px;
  //     margin-left: 0;
  //     height: 32px;
  //     padding-top: 0;
  //     padding-bottom: 0;
  //     line-height: 32px;
  //   }
  // }
  .boxSlider2 {
    height: 984px;
    overflow: auto;
  }
}
/deep/.el-card__body {
  padding: 0 !important;
}

// 原先按钮
.but {
  // margin-top: 32px;
  position: absolute;
  float: left;
  right: 24px;
  height: 32px;
  margin: 0;
  top: 46px;
  /deep/ .el-button {
    margin-right: 0;
    margin-left: 16px;
    height: 32px;
  }
  .btn {
    background-color: #004fe0;
    color: #fff;
    border: 1px solid #004fe0;
  }
}
.btn {
  background-color: #004fe0;
  color: #fff;
  border: 1px solid #004fe0;
}
.top {
  padding-left: 24px;
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
}
.el-breadcrumb {
  // margin-left: 24px;
  // margin-top: 18px;
  font-size: 20px;
  line-height: 29px;
  height: 29px;
}
.txt {
  font-size: 20px;
  font-weight: 700;
  text-align: left;
  padding-left: 24px;
  margin-top: 50px;
}
.main {
  margin-top: 32px;
  font-size: 14px;
  margin-left: 40px；;
}
.el-form-item {
  margin-left: 24px;
}
.el-input {
  width: 600px;
  height: 40px;
  position: absolute;
  left: 0;
}

.pop {
  width: 577px;
  height: 220px;
  background-color: #1b1c20;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  .one {
    font-size: 20px;
    color: #fff;
    margin-top: 32px;
    margin-left: 32px;
    text-align: left;
  }
  .two {
    font-size: 16px;
    color: #8d8e90;
    margin-top: 32px;
    margin-left: 32px;
    text-align: left;
  }
  .three {
    font-size: 16px;
    color: #8d8e90;
    margin-top: 15px;
    margin-left: 32px;
    text-align: left;
  }
}

.all {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 22;
}
.close {
  width: 50px;
  height: 50px;
  background: url("./icon／.png") no-repeat center;
  background-size: 100% 100%;
  position: absolute;
  top: -35px;
  left: 542px;
}
.saveBtn {
  height: 32px;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 32px;
  color: #004fe0;
  border: 1px solid #004fe0;
}
</style>